<template>
  <div>
    <div style="margin-bottom: 20px">
      <!-- 查找 -->
      <el-space wrap>
        <!-- 请输入商品名称 -->
        <el-input v-model="title" placeholder="请输入商品名称" />
        <!-- 请输入商品条形码 -->
        <el-input v-model="barcode" placeholder="请输入商品条形码" />
        <!-- 请选择商品状态 -->
        <el-select v-model="status" placeholder="请选择商品状态">
          <el-option
            v-for="item in optionStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <!-- 请选择类目 -->
        <el-cascader
          v-model="categoryId"
          :options="productOptions"
          placeholder="请选择类目"
          :props="props"
          clearable
        />
        <el-button type="primary" @click="onSearch">
          <span class="iconfont icon-sousuo"></span>查找
        </el-button>
        <el-button type="primary" @click="addData" v-permssion="'product:product:create'">
          <span class="iconfont icon-tianjia" ></span>添加
        </el-button>
      </el-space>
    </div>
    <!-- 表格 -->
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" border>
      <el-table-column type="selection" width="55" />
      <!-- 展开行的表格 -->
      <el-table-column type="expand" property="categoryId" label="sku信息">
        <template #default="props">
          <div style="padding:10px 20px 20px 30px">
            <!-- 展开行的表格 -->
            <el-table :data="props.row.skuList" border style="width: 100%">
              <el-table-column prop="barCode" label="商品条码" align="center" />
              <el-table-column prop="title" label="商品规格" align="center" />
              <el-table-column prop="stock" label="库存" align="center" />
              <el-table-column prop="originalPrice" label="原价" align="center" />
              <el-table-column prop="price" label="现价" align="center" />
              <el-table-column prop="vipPrice" label="VIP价格" align="center" />
            </el-table>
          </div>
        </template>
      </el-table-column>
      <el-table-column property="id" label="商品ID" />
      <el-table-column property="title" label="名称" />
      <el-table-column prop="img" label="商品主图" align="center">
        <template #default="scope">
          <el-popover
            :width="300"
            popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 20px;"
          >
            <template #reference>
              <img style=" width: 50px; height: 35px;" :src="scope.row.img? scope.row.img:''" />
            </template>
            <template #default>
              <div
                class="demo-rich-conent"
                style="display: flex; gap: 16px; flex-direction: column"
              >
                <img :src="scope.row.img? scope.row.img:''" />
              </div>
            </template>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column property label="商品详细介绍">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleCheck(scope.row)">查看</el-button>

        </template>
      </el-table-column>
      <el-table-column property="categoryId" label="类目ID" />
      <el-table-column property="freightTemplateId" label="邮费模板ID" />
      <el-table-column property="sales" label="销量" />
      <el-table-column property="unit" label="单位" />
      <el-table-column property="status" label="是否在售">
        <template #default="scope">
          <el-tag :type="scope.row.status==1?'success':'danger'">{{scope.row.status==1? '在售':'已过期'}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column property="description" label="描述" />
      <el-table-column property label="操作" align="center">
        <template #default="scope">
          <el-button size="small" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button
            size="small"
            :type="scope.row.status==0? 'warning':'success'"
            @click="UpperAndLower (scope.row,scope.$index)"
          >{{scope.row.status==0? '上架':'下架'}}</el-button>
        </template>
      </el-table-column>
    </el-table>

        <!-- 查看  商品详情的弹框 -->
          <el-dialog v-model="dialogTableVisible" title="商品详情">
            <img style="width:100%;" v-for="(item,index) in imgList" :key="index" :src="item" alt="">
          </el-dialog>
    <!-- //分页 -->
    <daily-demo v-bind="demo" @pages="pages" @limits="limits"></daily-demo>
  </div>
</template>
<script>
import http from "@/util/http";
import DailyDemo from "@/components/DailyOperation/Demo.vue";
export default {
  components: {
    DailyDemo,
  },
  data() {
    return {
      // 商品列表数据
      tableData: [],
      // 分页数据
      demo: {
        page: 1,
        limit: 10,
        total: 1, //分页--总条数
      },
      //----------- 查询的信息-------------
      title: "", //搜索标题
      barcode: "", // 商品条形码
      status: "", //商品状态
      categoryId: null, // 搜索分类
      // 	搜索分类---商品树
      productOptions: [],
      // 搜索分类---商品获取SPU树配置选项
      props: {
        checkStrictly: true,
        label: "title",
        value: "id",
        children: "childrenList",
        emitPath: false, //如果emitPath为false的
      },
      // 状态选择
      optionStatus: [
        { label: "下架", value: 0 },
        { label: "在售", value: 1 },
      ],
      // 查看 ---商品详情----的弹框的布尔值
      dialogTableVisible :false,
      // 查看 ---商品详情----的弹框的图片数据
      imgList:[],
    };
  },
  computed: {
    productListData() {
      return {
        _gp: "admin.product",
        _mt: "list",
        categoryId: this.categoryId, //搜索分类
        title: this.title, //搜索标题
        barcode: this.barcode, //商品条形码
        status: this.status, //商品状态
        page: this.demo.page, //商品页码
        limit: this.demo.limit, //商品页码长度
      };
    },
  },
  created() {
    //商品列表请求
    this.productList();
    // 类目树请求
    this.productTree();
  },
  methods: {
    //商品列表数据渲染的请求
    productList() {
      http.post(this.productListData).then((res) => {
        this.tableData = res.data.data.items;
        this.demo.total = res.data.data.total;
      });
    },
    // 查看----查看详情
    handleCheck(row) {
      this.dialogTableVisible = true
      let data = {
        _gp: "admin.product",
        _mt: "detail",
        spuId: row.id,
      };
      http.post(data).then((res) => {
        this.imgList = res.data.data.imgList
      });
    },
    // 添加
    addData() {
      // 跳转到添加页面
      // this.$router.replace({ path: "/Index/ProductAdd" });
      this.$router.replace({ path: "/Index/CategoryManagement/ProductAdd" });
    },
    // 商品编辑
    handleEdit(row){
      //  this.$router.push({ path: "/Index/ProductEdit",query:{id:row.id} });
       this.$router.push({ path: "/Index/CategoryManagement/ProductEdit",query:{id:row.id} });

    },
    // 查找
    onSearch() {
      this.productList();
    },
    // 类目树请求
    productTree() {
      let data = {
        _gp: "admin.category",
        _mt: "categoryTree",
      };
      http.post(data).then((res) => {
        this.productOptions = res.data.data;
      });
    },
    // 上下架-- 请求
    UpperAndLower(row, index) {
      if (row.status == 1) {
        row.status = 0;
      } else {
        row.status = 1;
      }
      let data = {
        _gp: "admin.product",
        _mt: "freezeOrActivation",
        spuId: row.id,
        status: row.status,
      };
      http.post(data).then((res) => {
        if (20010 == res.data.errno) {
          ElMessage.error(res.data.errmsg);
          row.status = 1;
        }
      });
    },
    //分页---当前页数
    pages(e) {
      this.demo.page = e;
      this.productList();
    },
    // 分页---每页显示条目个数
    limits(e) {
      this.demo.limit = e;
      this.productList();
    },
  },
};
</script>
